<template>
    <div class="frame-body">
        <div id="topBar" class="createTopBar">
            <div class="linkBar">
                <a href="javascript:void(0);" class="profileTitle">
                    <b>服务对象个案服务档案记录</b>
                </a>
                <div class="linkList">
                    <a href="javascript:void(0);" class="topBarLink"><a-icon class="console-icon" type="home"></a-icon>操作日志</a>
                    <a href="javascript:void(0);" class="topBarLink">操作日志</a>
                    <a href="javascript:void(0);" class="topBarLink">操作日志</a>
                </div>
            </div>
            <div class="stepBar"></div>
        </div>
        <div class="container">
            <div class="left-menu">
                <div class="left-menu-stage">
                    <div class="left-menu-scene">
                        <a-steps class="menu-list" v-model="step_current" direction="vertical" :current="current" @change="onStepChange"  size="small">

                            <a-step title="个案服务 - 开案" description="This is a description." />
                            <a-step title="个案服务 - 评估" description="This is a description." />
                            <a-step title="个案服务 - 分析及计划" description="This is a description." />
                            <a-step title="个案服务 - 介入" description="This is a description." />
                            <a-step title="个案服务 - 阶段性评估" description="This is a description." />
                            <a-step title="个案服务 - 结案" description="This is a description." />
                            <a-step title="个案服务 - 跟踪" description="This is a description." />
                        </a-steps>
                    </div>
                </div>
            </div>
            <div class="right-container">
                <div class="right-container-stage">
                    <sub-app>
                        <div class="page-body" style="margin-top:16px;">
                            <a-row :gutter="16">
                                <a-col :xs="12" :sm="12" :md="12" lg="12" :span="12">
                                    <a-card title="待处理任务">
                                        <a-list item-layout="vertical" size="small">
                                            <a-list-item>
                                                任务1    截止时间 2020年3月2日
                                            </a-list-item>
                                            <a-list-item>
                                                任务2    截止时间 2020年3月2日
                                            </a-list-item>
                                            <a-list-item>
                                                任务3    截止时间 2020年3月2日
                                            </a-list-item>
                                            <div slot="footer">
                                                分页
                                            </div>
                                        </a-list>
                                    </a-card>
                                </a-col>
                                <a-col :xs="12" :sm="12" :md="12" lg="12">
                                    <a-card title="快速查看">
                                        <a-select style='width: 30%;' v-model="form.fuwu"  @change="changeFuwu()" placeholder="请选择">
                                            <a-select-option value="1">
                                                档案管理
                                            </a-select-option>
                                            <a-select-option value="2">
                                                开案
                                            </a-select-option>
                                            <a-select-option value="3">
                                                评估
                                            </a-select-option>
                                            <a-select-option value="4">
                                                分析及计划
                                            </a-select-option>
                                            <a-select-option value="5">
                                                介入
                                            </a-select-option>
                                            <a-select-option value="6">
                                                阶段性评估
                                            </a-select-option>
                                            <a-select-option value="7">
                                                结案
                                            </a-select-option>
                                            <a-select-option value="8">
                                                跟踪
                                            </a-select-option>
                                        </a-select>
                                    </a-card>
                                </a-col>
                            </a-row>
                            <a-row :gutter="[16, { xs: 8, sm: 16, md: 24, lg: 32 }]">
                                <a-col :span="24">
                                    <a-card title="填写服务记录">
                                        <div class="c-flex c-row-between" v-show="tab==1">
                                            <div style="width: 100%;">
                                                <div class="c-flex c-row-between c-p-l-20 c-p-r-20">
                                                    <div class="change-btn border c-p-10">
                                                        <div class="tit">填写服务记录</div>

                                                    </div>
                                                    <div class="change-btn border c-p-10">
                                                        <div class="tit">待处理任务</div>
                                                        <div class="c-flex">
                                                            <div style="width: 100px;">
                                                                <div>任务</div>
                                                                <div class="c-font-12">任务一</div>
                                                                <div class="c-font-12">任务二</div>
                                                            </div>
                                                            <div>
                                                                <div>截至时间</div>
                                                                <div class="c-font-12">2020年3月2日</div>
                                                                <div class="c-font-12">2020年4月2日</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="change-btn border c-p-10">
                                                        <div class="tit">快速查看</div>
                                                        <div class="hand" @click="creat">个人信息表</div>
                                                        <div class="hand" @click="creat">督导批阅记录</div>
                                                        <div class="hand" @click="creat">服务产出与成效</div>
                                                    </div>
                                                </div>
                                                <div class="border c-m-t-20 c-p-10">
                                                    <div class="tit">个人信息</div>
                                                    <a-table :columns="columns1" :data-source="data1" :pagination="false" bordered>
						<span slot="action" slot-scope="text, record">
							<a-button size="small" style="margin-right: 10px;" type="primary" @click="creat">
							  查看
							</a-button>
							<a-button size="small" style="margin-right: 10px;" type="default" @click="creat">
							  编辑
							</a-button>
							<a-button size="small" style="margin-right: 10px;" type="danger">
							  删除
							</a-button>
						</span>
                                                    </a-table>
                                                    <div class="tit c-m-t-10">家庭情况</div>
                                                    <a-table :columns="columns2" :data-source="data2" :pagination="false" bordered>
						<span slot="action" slot-scope="text, record">
							<a-button size="small" style="margin-right: 10px;" type="primary" @click="creat">
							  查看
							</a-button>
							<a-button size="small" style="margin-right: 10px;" type="default" @click="creat">
							  编辑
							</a-button>
							<a-button size="small" style="margin-right: 10px;" type="danger">
							  删除
							</a-button>
						</span>
                                                    </a-table>
                                                    <div class="tit c-m-t-10">经济情况</div>
                                                    <a-table :columns="columns3" :data-source="data3" :pagination="false" bordered>
						<span slot="action" slot-scope="text, record">
							<a-button size="small" style="margin-right: 10px;" type="primary" @click="creat">
							  查看
							</a-button>
							<a-button size="small" style="margin-right: 10px;" type="default" @click="creat">
							  编辑
							</a-button>
							<a-button size="small" style="margin-right: 10px;" type="danger">
							  删除
							</a-button>
						</span>
                                                    </a-table>
                                                    <div class="tit c-m-t-10">紧急联系人</div>
                                                    <a-table :columns="columns4" :data-source="data4" :pagination="false" bordered>
						<span slot="action" slot-scope="text, record">
							<a-button size="small" style="margin-right: 10px;" type="primary" @click="creat">
							  查看
							</a-button>
							<a-button size="small" style="margin-right: 10px;" type="default" @click="creat">
							  编辑
							</a-button>
							<a-button size="small" style="margin-right: 10px;" type="danger">
							  删除
							</a-button>
						</span>
                                                    </a-table>
                                                    <div class="tit c-m-t-10">其他资料补充</div>
                                                    <a-table :columns="columns5" :data-source="data5" :pagination="false" bordered>
						<span slot="action" slot-scope="text, record">
							<a-button size="small" style="margin-right: 10px;" type="primary" @click="creat">
							  查看
							</a-button>
							<a-button size="small" style="margin-right: 10px;" type="default" @click="creat">
							  编辑
							</a-button>
							<a-button size="small" style="margin-right: 10px;" type="danger">
							  删除
							</a-button>
						</span>
                                                    </a-table>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="c-flex c-row-between" v-show="tab>1">
                                            <div style="width: 860px;">
                                                <div class="border c-flex c-p-15 c-row-between">

                                                    <div v-show="tab==2" class="tabItem" :class="[active==0?'active':'']" @click="active=0">开案表</div>
                                                    <div v-show="tab==3" class="tabItem active">评估表</div>
                                                    <div v-show="tab==2" class="tabItem" :class="[active==1?'active':'']" @click="active=1">过程记录表</div>
                                                </div>
                                                <div class="c-font-24 c-m-t-10 c-text-center" v-show="active==0&&tab==2">开案表</div>
                                                <div class="c-font-24 c-m-t-10 c-text-center" v-show="active==1&&tab==2">过程记录表</div>
                                                <div class="c-font-24 c-m-t-10 c-text-center" v-show="tab==3">过程记录表</div>
                                                <div class="border c-p-10" v-show="active==0&&tab==2">
                                                    <div class="tit">求助渠道</div>
                                                    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                                                        <a-radio-group v-model="form.resource">
                                                            <a-radio value="1">
                                                                本人求助
                                                            </a-radio>
                                                            <a-radio value="2">
                                                                根据探访名单
                                                            </a-radio>
                                                            <a-radio value="3">
                                                                外展
                                                            </a-radio>
                                                            <a-radio value="4">
                                                                他人转介
                                                            </a-radio>
                                                            <a-radio value="5">
                                                                机构/部门转介
                                                            </a-radio>
                                                            <a-radio value="6">
                                                                其他
                                                            </a-radio>
                                                        </a-radio-group>
                                                        <a-form-model-item v-show="form.resource==4||form.resource==5" ref="name" label="转介者姓名">
                                                            <a-input class="w-600" v-model="form.name" />
                                                        </a-form-model-item>
                                                        <a-form-model-item v-show="form.resource==4||form.resource==5" label="与服务对象关系">
                                                            <a-input class="w-600" />
                                                        </a-form-model-item>
                                                        <a-form-model-item v-show="form.resource==4||form.resource==5" label="转介者性别">
                                                            <a-radio-group v-model="form.sex">
                                                                <a-radio value="1">
                                                                    男
                                                                </a-radio>
                                                                <a-radio value="2">
                                                                    女
                                                                </a-radio>
                                                            </a-radio-group>
                                                        </a-form-model-item>
                                                        <a-form-model-item v-show="form.resource==4||form.resource==5" label="转介者联系电话">
                                                            <a-input class="w-600" />
                                                        </a-form-model-item>
                                                        <a-form-model-item v-show="form.resource==4||form.resource==5" label="转介者住址">
                                                            <a-input class="w-600" />
                                                            <a-input class="w-600" v-model="form.address" type="textarea" placeholder="详细地址" />
                                                        </a-form-model-item>
                                                        <a-form-model-item v-show="form.resource==6" label="其他">
                                                            <a-input class="w-600" v-model="form.desc" type="textarea" placeholder="详细地址" />
                                                        </a-form-model-item>
                                                    </a-form-model>
                                                    <div class="tit">服务对象面临的问题</div>
                                                    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                                                        <a-form-item label="问题性质">
                                                            <a-select mode="tags" style="width: 100%" :token-separators="[',']">
                                                                <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                                                                    选项{{ i }}
                                                                </a-select-option>
                                                            </a-select>
                                                        </a-form-item>
                                                        <a-form-model-item label="服务对象情况">
                                                            <a-input class="w-600" v-model="form.desc1" type="textarea" placeholder="建议100字" />
                                                        </a-form-model-item>
                                                        <a-form-model-item label="提出面临的问题">
                                                            <a-input class="w-600" v-model="form.desc2" type="textarea" placeholder="建议100字" />
                                                        </a-form-model-item>
                                                        <a-form-model-item label="期望获得的帮助">
                                                            <a-input class="w-600" v-model="form.desc3" type="textarea" placeholder="建议100字" />
                                                        </a-form-model-item>
                                                        <a-form-model-item label="尝试过的应付方法">
                                                            <a-input class="w-600" v-model="form.desc4" type="textarea" placeholder="建议100字" />
                                                        </a-form-model-item>
                                                        <a-form-model-item label="危机程度">
                                                            <a-radio-group v-model="form.weiji">
                                                                <a-radio value="1">
                                                                    低
                                                                </a-radio>
                                                                <a-radio value="2">
                                                                    中
                                                                </a-radio>
                                                                <a-radio value="2">
                                                                    高
                                                                </a-radio>
                                                            </a-radio-group>
                                                        </a-form-model-item>
                                                    </a-form-model>
                                                    <a-form-model-item label="服务对象是否愿意接受服务">
                                                        <a-switch v-model="form.delivery" />
                                                    </a-form-model-item>
                                                    <a-form-model-item v-show="form.delivery" label="是否完成接受服务同意书">
                                                        <a-switch v-model="form.delivery2" />
                                                    </a-form-model-item>
                                                    <a-form-model-item>
                                                        <a-input v-show="form.delivery2==false&&form.delivery==false" class="w-600" v-model="form.desc4" type="textarea" placeholder="未完成原因" />
                                                        <a-upload
                                                                v-show="form.delivery2"
                                                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                                                list-type="picture"
                                                                :default-file-list="fileList"
                                                        >
                                                            <a-button> <a-icon type="upload" /> 点击上传 </a-button>
                                                        </a-upload>
                                                    </a-form-model-item>
                                                    <div class="c-flex c-row-around c-m-b-10" style="width: 500px;margin: 0 auto;">
                                                        <a-button type="default">
                                                            取消
                                                        </a-button>
                                                        <a-button type="default">
                                                            保存
                                                        </a-button>
                                                        <a-button type="default">
                                                            提交
                                                        </a-button>
                                                    </div>
                                                </div>
                                                <div class="border c-p-10" v-show="active==1&&tab==2">
                                                    <a-form :form="form" layout="vertical">
                                                        <a-row :gutter="16">
                                                            <a-col :span="12">
                                                                <a-form-item label="时间">
                                                                    <a-date-picker
                                                                            style="width: 100%"
                                                                            :get-popup-container="trigger => trigger.parentNode"
                                                                    />
                                                                </a-form-item>
                                                            </a-col>
                                                            <a-col :span="12">
                                                                <a-form-item label="地点">
                                                                    <a-input placeholder="请输入地点" />
                                                                </a-form-item>
                                                            </a-col>
                                                        </a-row>
                                                        <a-row :gutter="16">
                                                            <a-col :span="24">
                                                                <a-form-item label="形式">
                                                                    <a-input placeholder="请输入形式" />
                                                                </a-form-item>
                                                            </a-col>
                                                        </a-row>
                                                        <a-row :gutter="16">
                                                            <a-col :span="12">
                                                                <a-form-item label="接触对象">
                                                                    <a-input placeholder="请输入接触对象" />
                                                                </a-form-item>
                                                            </a-col>
                                                            <a-col :span="12">
                                                                <a-form-item label="人数">
                                                                    <a-input placeholder="请输入人数" />
                                                                </a-form-item>
                                                            </a-col>
                                                        </a-row>
                                                        <a-row :gutter="16">
                                                            <a-col :span="24">
                                                                <a-form-item label="目标达成">
                                                                    <a-radio-group v-model="form.pingfen">
                                                                        <a-radio value="1">
                                                                            完全达成(5)
                                                                        </a-radio>
                                                                        <a-radio value="2">
                                                                            大部分达成(4)
                                                                        </a-radio>
                                                                        <a-radio value="3">
                                                                            达成一半(3)
                                                                        </a-radio>
                                                                        <a-radio value="4">
                                                                            达成少部分(2)
                                                                        </a-radio>
                                                                        <a-radio value="5">
                                                                            未达成(1)
                                                                        </a-radio>
                                                                    </a-radio-group>
                                                                </a-form-item>
                                                                <a-input v-model="form.mubiao" type="textarea" placeholder="请输入" />
                                                            </a-col>
                                                        </a-row>
                                                        <a-row :gutter="16">
                                                            <a-col :span="24">
                                                                <a-form-item label="介入反思">
                                                                    <a-input placeholder="请输入介入反思" />
                                                                </a-form-item>
                                                            </a-col>
                                                        </a-row>
                                                        <a-row :gutter="16">
                                                            <a-col :span="24">
                                                                <a-form-item label="下一步跟进计划">
                                                                    <a-input placeholder="请输入下一步跟进计划" />
                                                                </a-form-item>
                                                            </a-col>
                                                        </a-row>
                                                    </a-form>
                                                    <div class="c-flex c-row-around c-m-b-10" style="width: 500px;margin: 0 auto;">
                                                        <a-button type="default">
                                                            取消
                                                        </a-button>
                                                        <a-button type="default">
                                                            保存
                                                        </a-button>
                                                        <a-button type="default">
                                                            提交
                                                        </a-button>
                                                    </div>
                                                </div>
                                                <div class="border c-p-10" v-show="tab==3">
                                                    <div class="tit">服务对象面临的问题</div>
                                                    <a-form :form="form" layout="vertical">
                                                        <a-row :gutter="16">
                                                            <a-col :span="18">
                                                                <a-form-item label="服务对象情况">
                                                                    <a-input placeholder="请输入接触对象" type="textarea" />
                                                                </a-form-item>
                                                            </a-col>
                                                            <a-col :span="6">
                                                                <a-form-item label="家庭关系图">
                                                                    <a-input placeholder="上传或app画图" type="textarea"  />
                                                                </a-form-item>
                                                            </a-col>
                                                        </a-row>
                                                        <a-row :gutter="16">
                                                            <a-col :span="12">
                                                                <a-form-item label="期望获得的协助">
                                                                    <a-input placeholder="期望获得的协助" type="textarea" />
                                                                </a-form-item>
                                                            </a-col>
                                                            <a-col :span="12">
                                                                <a-form-item label="提出面临的问题">
                                                                    <a-input placeholder="提出面临的问题" type="textarea"  />
                                                                </a-form-item>
                                                            </a-col>
                                                        </a-row>
                                                        <a-row :gutter="16">
                                                            <a-col :span="24">
                                                                <a-form-item label="服务对象面临的危机问题">
                                                                    <a-input placeholder="服务对象面临的危机问题" />
                                                                </a-form-item>
                                                            </a-col>
                                                        </a-row>
                                                        <a-row :gutter="16">
                                                            <a-col :span="24">
                                                                <a-form-item>
                                                                    <a-input placeholder="问题评估" />
                                                                </a-form-item>
                                                            </a-col>
                                                        </a-row>
                                                        <a-row :gutter="16">
                                                            <a-col :span="24">
                                                                <a-form-item>
                                                                    <a-input placeholder="服务对象期望达成的目标" />
                                                                </a-form-item>
                                                            </a-col>
                                                        </a-row>
                                                    </a-form>
                                                    <div class="c-flex c-row-around c-m-b-10" style="width: 500px;margin: 0 auto;">
                                                        <a-button type="default">
                                                            取消
                                                        </a-button>
                                                        <a-button type="default">
                                                            保存
                                                        </a-button>
                                                        <a-button type="default">
                                                            提交
                                                        </a-button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div style="width: 300px;">
                                                <untils-box></untils-box>
                                            </div>
                                        </div>

                                    </a-card>
                                </a-col>
                            </a-row>
                        </div>
                    </sub-app>
                </div>
            </div>
            <div class="subcontrolSection">
                <div class="subcontrolSection-inner">
                    <div class="infoArea">
                        <div class="info-view">
                            <div class="inline info-view-period">
                                <div class="info-view-list">
                                    <div class="info-view-item">
                                        <span class="info-view-name">对象名：</span>
                                        <span class="info-view-content">张凯悦</span>
                                        <div class="info-view-code-area">
                                            <span class="code-area inline">档案编号：ACDCDKJRAL991KDCA</span>
                                        </div>
                                    </div>
                                    <div class="info-view-item">
                                        <span class="info-view-name">联系电话：</span>
                                        <span class="info-view-content">13000000000</span>
                                        <div class="info-view-code-area">
                                            <span class="code-area inline">项目：阿里困境儿童帮扶计划</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--
                            <div>项目信息</div>
                            <div>档案编号</div>
                            <div>联系电话</div>
                            -->
                        </div>
                    </div>
                    <span class="actionArea">
						<div class="fl">
							<a-button>相关审核记录</a-button>
						</div>
						<div class="inline">
							<a-button>保存/更新</a-button>
						</div>
						<div class="inline">
							<a-button>打印</a-button>
						</div>
						<div class="inline">
							<a-button>返回</a-button>
						</div>
					</span>
                </div>
            </div><a-drawer
                title="这个标题动态变换为查看或编辑的东西"
                :width="720"
                :visible="visible"
                :body-style="{ paddingBottom: '80px' }"
                @close="onClose"
        >
            <user-info></user-info>
        </a-drawer>
        </div></div>
</template>

<script>
    import userInfo from '../../../components/userInfo.vue'
    import untilsBox from '../../../components/untilsBox.vue'
    const columns1 = [{
        title: '服务表格',
        dataIndex: 'name',
        align:'center',
    },
        {
            title: '提交时间',
            dataIndex: 'time',
            align:'center',
        },
        {
            title: '操作员',
            dataIndex: 'time1',
            align:'center',
        },
        {
            title: '操作',
            key: 'action',
            width:280,
            align:'center',
            scopedSlots: { customRender: 'action' },
        },
    ];
    const data1 = [{
        name: '开案表'
    }, {
        name: '评估表'
    }, {
        name: '分析及计划表'
    }, {
        name: '阶段性评估表'
    }, {
        name: '结案表'
    }, {
        name: '转介表'
    }, ];
    const columns2 = [{
        title: '序号',
        dataIndex: 'name',
        align:'center',
    },
        {
            title: '日期',
            dataIndex: 'time',
            align:'center',
        },
        {
            title: '时间',
            dataIndex: 'time1',
            align:'center',
        },
        {
            title: '地点',
            dataIndex: 'time2',
            align:'center',
        },
        {
            title: '形式',
            dataIndex: 'time3',
            align:'center',
        },
        {
            title: '接触对象',
            dataIndex: 'time4',
            align:'center',
        },
        {
            title: '对象人数',
            dataIndex: 'time5',
            align:'center',
        },
        {
            title: '操作员',
            dataIndex: 'time6',
            align:'center',
        },
        {
            title: '操作',
            key: 'action',
            align:'center',
            width:280,
            scopedSlots: { customRender: 'action' },
        },
    ];
    const data2 = [{
        name: '1'
    }, {
        name: '2'
    }, {
        name: '3'
    }];
    const columns3 = [{
        title: '填写表格',
        dataIndex: 'name',
        align:'center',
    },
        {
            title: '提交时间',
            dataIndex: 'time',
            align:'center',
        },
        {
            title: '操作员',
            dataIndex: 'time1',
            align:'center',
        },
        {
            title: '操作',
            key: 'action',
            align:'center',
            width:280,
            scopedSlots: { customRender: 'action' },
        },
    ];
    const data3 = [{
        name: '接受服务同意书'
    }, {
        name: '服务对象安全计划表'
    }, {
        name: '服务对象成效自评表'
    }, {
        name: '转介同意书'
    }];
    const columns4 = [{
        title: '评估表 ',
        dataIndex: 'name',
        align:'center',
    },
        {
            title: '提交时间',
            dataIndex: 'time',
            align:'center',
        },
        {
            title: '操作员',
            dataIndex: 'time1',
            align:'center',
        },
        {
            title: '操作',
            key: 'action',
            width:280,
            align:'center',
            scopedSlots: { customRender: 'action' },
        },
    ];
    const data4 = [{}, {}];
    const columns5 = [{
        title: '资料 ',
        dataIndex: 'name',
        align:'center',
    },
        {
            title: '提交时间',
            dataIndex: 'data',
            align:'center',
        },
        {
            title: '操作员',
            dataIndex: 'user',
            align:'center',
        },
        {
            title: '操作',
            key: 'action',
            width:280,
            align:'center',
            scopedSlots: { customRender: 'action' },
        },
    ];
    const data5 = [{
        name: '服务对象重大疾病申请书',
        data: "2020-09-08",
        user: '张三'
    },
        {
            name: '服务对象赠送社工的感谢信',
            data: "2020-09-08",
            user: '张三'
        },
    ];
    export default {
        components:{
            userInfo,
            untilsBox
        },
        data() {
            return {
                step_current:0,
                tab: 1,
                active: 0,
                labelCol: {
                    span: 4
                },
                wrapperCol: {
                    span: 14
                },
                form: {
                    fuwu: '1',
                    sex: '1',
                    resource: '1',
                    weiji: '1',
                    pingfen: '1',
                    delivery:false,
                    delivery2:false,
                    domains: [{
                    }],
                    domains2: [{
                    }]
                },
                Top: false,
                rules: {},
                visible: false,
                data1,
                columns1,
                data2,
                columns2,
                data3,
                columns3,
                data4,
                columns4,
                data5,
                columns5,
            }
        },
        computed: {
        },
        methods: {
            onStepChange(){
                this.current = current;
            },
            handleSubmit() {

            },
            getScroll(event) {
                console.log(event.target.scrollTop)
            },
            activeKey(key) {
                console.log(key);
            },
            creat() {
                this.visible = true;
            },
            onClose() {
                this.visible = false;
            },
            removeDomain(item) {
                let index = this.form.domains.indexOf(item);
                if (index !== -1) {
                    this.form.domains.splice(index, 1);
                }
            },
            addDomain() {
                this.form.domains.push({
                    value: '',
                    key: Date.now(),
                });
            },
            removeDomain2(item) {
                let index = this.form.domains2.indexOf(item);
                if (index !== -1) {
                    this.form.domains2.splice(index, 1);
                }
            },
            addDomain2() {
                this.form.domains2.push({
                    value: '',
                    key: Date.now(),
                });
            },
            changeFuwu(e){
                console.log(this.form.fuwu,this.tab)
                let that = this;
                if(Number(this.form.fuwu)>this.tab+1){
                    switch (this.tab){
                        case 1:
                            that.$message.info('您还未经过开案');
                            break;
                        case 2:
                            that.$message.info('您还未经过评估');
                            break;
                        case 3:
                            that.$message.info('您还未经过分析及计划');
                            break;
                        case 4:
                            that.$message.info('您还未经过介入');
                            break;
                        case 5:
                            that.$message.info('您还未经过阶段性评估');
                            break;
                        case 6:
                            that.$message.info('您还未经过结案');
                            break;
                        default:
                            break;
                    }
                    this.tab+=1;
                    this.form.fuwu = String(this.tab);
                }else{
                    this.tab = Number(this.form.fuwu);
                }
            },
            success() {
                this.$message.success('提交成功，请等待审核');
            },
        }
    }
</script>

<style>
    .container {
        top:50px;
    }
    .left-menu,.left-menu .left-menu-stage {
        width:224px;
    }
    .left-menu .left-menu-stage .left-menu-scene {
        left:16px;
        right:0;
    }
    .left-menu .left-menu-stage .left-menu-scene .menu-title {
        margin-left: -16px;
    }
    .left-menu .menu-list {
        top:24px;
    }
    .right-container {
        left:224px;
    }
    .serve {
        width: 1200px;
        margin: 0 auto;
        text-align: left;
        position: relative;
        padding-bottom: 40px;
    }

    .title {
        font-weight: bold;
        font-size: 24px;
    }

    .border {
        border: 1px solid #D9D9D9;
    }

    .top0 {
        position: fixed;
        top: 50px;
        left: 0;
    }

    .w-600 {
        width: 600px;
    }

    .tit {
        margin-bottom: 20px;
        color: rgba(0, 0, 0, 0.85);
        font-weight: bold;
        font-size: 14px;
        line-height: 1.5;
    }
    .change-btn{
        width: 320px;
    }
    .hand{
        line-height: 18px;
        cursor: pointer;
    }
    .tabItem{
        width: 30%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: rgb(217,217,217);
    }
    .active{
        background-color: rgb(255,102,0);
        color: #FFFFFF;
    }
</style>
